<template>
    <!-- 添加/编辑分类对话框 -->
    <el-dialog :title="title" v-model="editCateDialogVisible" width="50%" @close="editCateDialogClosed">
      <!-- 添加分类表单 -->
      <el-form :model="editCateFormData" :rules="editCateFormRules" ref="editCateFormRuleForm" label-width="100px">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="editCateFormData.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <el-cascader ref="cateHandle" v-model="selectedKeys" :options="parentCateList" :props="cascaderProps" @change="parentCateChange" clearable change-on-select></el-cascader>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <el-button @click="editCateDialogClosed">取 消</el-button>
        <el-button type="primary" @click="editCate">确 定</el-button>
      </span>
    </el-dialog>
  </template>

<script setup>
import { ref, computed } from 'vue'
import { getCateInfoByIdApi, getCateListApi, addCateApi, editCateApi } from '@/api/cate'
import { message } from '@/utils/functions'
// 控制对话框的显示和隐藏
const editCateDialogVisible = ref(false)
// 表单数据
const editCateFormData = ref({
  cat_id: '',
  cat_name: '',
  // 默认为一级分类，父id为0
  cat_pid: 0,
  // 默认为一级分类, 层级为0
  cat_level: 0
})
// 表单验证
const editCateFormRules = ref({
  cat_name: [
    { required: true, message: '请输入分类名称', trigger: 'blur' },
    {
      min: 2,
      max: 10,
      message: '角色名称的长度在2-10个字符之间',
      trigger: 'blur'
    }
  ]
})

// 标题
const title = computed(() => (editCateFormData.value.cat_id ? '编辑分类' : '添加分类'))
// 根据分类id查询分类数据
const getCateInfoById = async id => {
  const data = await getCateInfoByIdApi(id)
  editCateFormData.value = data
  // 把它的父id全部得到，默认显示在级联菜单中
  // 递归找出当前分类的父级id的数组
  await getParentIds(data)
}

// 参考文档：https://www.cnblogs.com/ss-jojo/p/14468961.html
async function getParentIds(data) {
  if (data.cat_level === 0) {
    selectedKeys.value = []
  } else if (data.cat_level === 1) {
    // 二级分类
    selectedKeys.value = [data.cat_pid]
  } else {
    // 三级分类
    const row = await getCateInfoByIdApi(data.cat_pid)
    selectedKeys.value = [row.cat_pid, data.cat_pid]
  }
}

// 级联菜单相关
// 父级分类数据（一、二级分类）
const parentCateList = ref([])
// 级联菜单选中项的值（每个下拉选项的value值的数组）
const selectedKeys = ref([])
// 配置级联菜单中数据如何展示
const cascaderProps = ref({
  // 当要展示的下拉选项的数据的属性不是value和label时，需要配置该属性
  value: 'cat_id',
  label: 'cat_name',
  // 多级的数据的关联关系字段不是children时需要配置该属性
  children: 'children',
  // 默认情况下，级联菜单的选项是点击触发的，如果需要hover触发，需要配置该属性
  expandTrigger: 'hover',
  // 设置父子节点取消选中关联，从而达到选择任意一级选项的目的
  checkStrictly: true
})

// 获取一、二级分类数据
const getparentCateList = async () => {
  const data = await getCateListApi({ type: 2 })
  parentCateList.value = data
}

// 级联菜单选项发生改变,来收集选中的哪个选项
const cateHandle = ref(null)
const parentCateChange = () => {
  if (selectedKeys.value && selectedKeys.value.length > 0) {
    // 父id为数组的最后一个元素
    editCateFormData.value.cat_pid = selectedKeys.value[selectedKeys.value.length - 1]
    // 层级为数组的长度
    editCateFormData.value.cat_level = selectedKeys.value.length
  } else {
    editCateFormData.value.cat_pid = 0
    editCateFormData.value.cat_level = 0
  }
  // 选中了父级后，让级联菜单隐藏
  cateHandle.value.togglePopperVisible(false)
}

// 监听取消/关闭对话框
const editCateDialogClosed = () => {
  editCateDialogVisible.value = false
}
const emit = defineEmits(['getCateList'])
// 添加/修改分类数据
const editCate = async () => {
  if (editCateFormData.value.cat_id) {
    // 编辑操作
    await editCateApi(editCateFormData.value)
    message('success', '编辑分类成功')
  } else {
    await addCateApi(editCateFormData.value)
    message('success', '添加分类成功')
  }
  editCateDialogClosed()
  emit('getCateList')
}

// 向外暴露打开对话框的方法
const open = async id => {
  // 获取一、二级分类数据
  await getparentCateList()
  // 先清空表单数据
  editCateFormData.value = {}
  editCateFormData.value.cat_pid = 0
  editCateFormData.value.cat_level = 0
  selectedKeys.value = []
  if (id) {
    await getCateInfoById(id)
  }
  editCateDialogVisible.value = true
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
</style>
